<template>
	<view class="card mg-bottom-10 br-rd-10 mg-10" @click="click" :style="{'backgroundColor':hexToRgb(item.color)}">
	<!-- 	<u-modal :showCancelButton="true" cancelText="取消" @cancel="cancelByDelete" @confirm="confrmByDelete"
			:show="showDelete" title="删除提示" content='卡号删除吗!'></u-modal> -->
		<u-cell :border="false" icon="setting-fill">
			<view class="icon" slot="icon">
				<iconfont :icon="item.icon" size="25" :color="item.color"></iconfont>
			</view>
			<view class="title pd-right-5 pd-left-5 font-size-16 text-indent" slot="title">{{item.name}}</view>
			<view class="title pd-right-5 pd-left-5 font-size-12 flex-item text-indent" slot="label">
			<view class="pd-top-10 pd-bottom-10 text-center">
				<text>{{item.userName}}</text>
			</view>
			<view class="pd-top-10 pd-bottom-10 text-center">
				<text>{{item.cardNo}}</text>
			</view>
			
			</view>
		</u-cell>
		
	</view>
</template>

<script>
	import {
		findMyBankCardByDelete
	} from "@/api/bank.js"
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				showDelete: false
			}
		},
		methods: {
			click: function() {
				//console.log("HHHHHHHHHHHHHHHHHHHHHHH")
						this.$emit("action",this.item)
			},
			longClick: function() {
				console.log("HHHHHHHHHHHHHHHHHHHHHHH")
				this.showDelete = true
			},
			confrmByDelete: function(e) {
				console.log("HHHHHHHHHHHHHHHHHHHHHHH",this.item)
				var the = this;
				findMyBankCardByDelete(this.item.id).then(res => {
							the.showDelete = false
					the.$emit("action")
				})
			},
			cancelByDelete: function(e) {
				console.log("HHHHHHHHHHHHHHHHHHHHHHH")
				this.showDelete = false
			},hexToRgb(hex) {
				const bigint = parseInt(hex.slice(1), 16);
				const r = (bigint >> 16) & 255;
				const g = (bigint >> 8) & 255;
				const b = bigint & 255;
				return `rgb(${r}, ${g}, ${b},0.7)`;
			}
		}
	}
</script>

<style lang="scss">
	.card {
		background-color: blue;
		color: #fff !important;

		.title {
			color: #fff !important;
		}

		.icon {
			background-color: #fff;
			width: 30px;
			height: 30px;
			align-items: center;
			text-align: center;
			line-height: 30px;
			border-radius: 30px;
		}
	}
	.flex-item{
		display: flex;
		justify-content: space-between;
	}
	.text-indent{
		text-indent: 10px;
	}
</style>
